<!DOCTYPE HTML>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
		<script type="text/javascript">
		
			function f(a){
			//alert();
				$("#trafficStatus").css('background-image', 'url(TrafficLight' + a + '.png)');
				$.ajax({
					type: 'POST',
					dataType: 'text',
					url: 'changeTempo.php',
					data: 'difficulty=' + a,
					success: function(data){
						g(data,null);
					}
				});
			
			}
			function g(data, data2){
				//
			}
			
			function preload(arrayOfImages) {
				$(arrayOfImages).each(function(){
					$('<img/>')[0].src = this;
					// Alternatively you could use:
					// (new Image()).src = this;
				});
			}

// Usage:

			preload([
				'TrafficLightok.png',
				'TrafficLighteasy.png',
				'TrafficLighthard.png',
				'TrafficLightstop.png'
				
			]);
				
		</script>
	</head>
<body>

<?php
	session_start();
	
	if(!isset($_SESSION['studentID'])) {
		die('Needs to join a room properly, no student found');
	}
	
	$studentID = $_SESSION['studentID'];
	
	if(isset($_SESSION['roomID'])){
		$roomID = $_SESSION['roomID'];
	}
	
	$con = mysql_connect("localhost","root","");
	if (!$con) {
		die('Could not connect: ' . mysql_error());
	}
	mysql_select_db("ciu196", $con);
	
	$sql = "SELECT tempo from StudentsInRooms WHERE roomID = '$roomID' AND studentID = '$studentID';";
	$res = mysql_query($sql,$con);	
	if(!$res) {
		die('Error: couldnt get the tempo from StudentsInRooms' . mysql_error());
	} 
	
	$tempo = mysql_fetch_row($res);
	
	mysql_close();
?>

<h3>Room <?php echo $roomID ?></h3>
<div id="trafficStatus">
		<div id="divSTOP" onClick="javascript:f('stop');"> </div>
		<div id="divHARD" onClick="javascript:f('hard');"> </div>
		<div id="divOK" onClick="javascript:f('ok');"> </div>
		<div id="divEASY" onClick="javascript:f('easy');"> </div>

</div>



</body>
</html>
